<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/hoverButton.css">

</head>

<body>
  <div class="title">利用伪元素，形成线性效果</div>
  <div class="clear">
    <div class="sinBlock">
      <div class="demo demo1_1">双线延展</div>
    </div>
    <div class="sinBlock">
      <div class="demo demo1_2">双线延展</div>
    </div>
    <div class="sinBlock">
      <div class="demo demo1_3">双线交叉</div>
    </div>
    <div class="sinBlock">
      <div class="demo demo1_4">双线交叉</div>
    </div>
    <div class="sinBlock">
      <div class="demo demo1_5">
        顶角延展
        <span class="leftTop"></span>
        <span class="rightBottom"></span>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo1_6">
        四边旋转
        <span class="leftTop"></span>
        <span class="rightBottom"></span>
      </div>
    </div>
  </div>
  <div class="title">利用内部子元素，形成遮罩效果</div>
  <div class="clear">
    <div class="sinBlock">
      <div class="demo demo2_1">
        <span class="text">
          层叠渐进
        </span>
        <span class="mask1"></span>
        <span class="mask2"></span>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo2_2">
        <span class="text">
          层叠倾斜
        </span>
        <span class="mask1"></span>
        <span class="mask2"></span>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo2_3">
        <span class="text">
          层叠扩散
        </span>
        <span class="mask1"></span>
        <span class="mask2"></span>
      </div>
    </div>
    <div class="sinBlock">
      <div class="demo demo2_4">
        <span class="text">
          交叉渐进
        </span>
        <span class="mask1"></span>
        <span class="mask2"></span>
      </div>
    </div>
  </div>
  <div class="title">利用伪元素，形成切换效果</div>
  <div class="clear">
    <div class="sinBlock">
      <div class="demo demo3_1"></div>
    </div>
  </div>
</body>


</html>